<template>
  <div>
    <van-search disabled v-model="value" shape="round" placeholder="请输入搜索关键词" @click="openPopup" />

    <div class="content">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item :title="item.name" v-for="item in categoryList" :key="item.id" />
      </van-sidebar>
      <div class="right">
        <div class="banner">
          <img :src="currentCategory.banner_url" alt />
          <span>{{currentCategory.front_name}}</span>
        </div>
        <div class="mytitle">
          <span></span>
          <h3>{{currentCategory.name}}分类</h3>
        </div>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>

    <transition name="fade">
      <div class="popup_bg" v-if="$store.state.showpopup"></div>
    </transition>
    <transition name="slide">
      <keep-alive>
        <router-view v-if="$route.path=='/category/popup'"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
 
<script>
import { CatalogAPI, GetCurrentCategoryAPI } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      // 左侧导航数组
      categoryList: [],
      // 右侧数据
      currentCategory: {},
    };
  },
  created() {
    CatalogAPI().then((res) => {
      console.log(res);
      if (res.errno == 0) {
        let { categoryList, currentCategory } = res.data;
        this.categoryList = categoryList;
        this.currentCategory = currentCategory;
      }
    });
  },
  methods: {
    openPopup() {
      // 路由跳转，打开popup
      this.$router.push("/category/popup");
      this.$store.commit("changeShowpopup", true);
    },
    // 侧边栏点击
    onChange(index){
      GetCurrentCategoryAPI({
        id: this.categoryList[index].id
      }).then(res=>{
        if(res.errno == 0){
          this.currentCategory = res.data.currentCategory;
        }
      })
    }
  },
};
</script>
 
<style lang = "less" scoped>
.popup_bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 998;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s linear;
}

.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.content {
  display: flex;
  justify-content: space-between;
  .van-sidebar {
    width: 20%;
    height: calc(100vh - 104px);
    background: #f7f8fa;
  }
  .right {
    width: 80%;
    height: calc(100vh - 104px);
    background: #fff;
    .banner {
      width: 95%;
      margin: 0 auto;
      position: relative;
      img {
        width: 100%;
        height: 10rem;
        display: block;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      span {
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        width: 100%;
        text-align: center;
        line-height: 10rem;
      }
    }
  }
}

.mytitle {
  background: #fff;
  height: 50px;
  line-height: 50px;
  position: relative;
  h3 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 30%;
    background: #fff;
    text-align: center;
  }
  span {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 2px;
    width: 50%;
    background: #ccc;
  }
}
</style>